<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0, user-scalable=no">
	<title>懵逼树登录</title>
	<link rel="icon" th:href="@{/img/manager/register/logo.png}" type="image/png">
	<link rel="stylesheet" th:href="@{/js/register/base.css}">
	<link rel="stylesheet" th:href="@{/js/register/login.css}">
	<link rel="stylesheet" th:href="@{/js/register/bas.css}" />
</head>
<body>

<div class="c-title">
	<div class="logo">
		<img th:src="@{/img/manager/register/tree.jpg}" width="42" height="32">
	</div>
	<p class="name">懵逼树</p>
	<h1></h1>
</div>

<div class="c-login">
	<h1>用户登录</h1>
	<form class="loginForm">
		<input id="phone" type="text" name="phone" placeholder="请输入手机号码" lay-verify="phone"/>
		<input id="pwd" type="password" name="password" placeholder="请输入密码" lay-verify="required"/>
		<input type="text" autocomplete="off" width="50" id="text" class="codeText" placeholder="请输入验证密码" lay-verify="required" />
		<canvas id="canvas" width="120px" height="40px" style="margin-top: -15px;margin-bottom: -10px"></canvas>
		<input type="button" value="登录" id="bt"/>
	</form>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
	<p style="color: coral">懵逼树 &copy; 2020. 由火箭和罗俊组合开发 懵逼树后台管理系统</p>
	<p style="color: coral">后台管理登录</a></p>
</div>
</body>
<script th:src="@{/assets/plugins/jquery/jquery-3.1.0.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript" th:src="@{/js/register/base.js}"></script>
<script type="text/javascript">
	layui.use(['form','laydate'], function() {
		//验证码js
		var canvas = document.getElementById("canvas");//演员
		var context = canvas.getContext("2d");//舞台，getContext() 方法可返回一个对象，该对象提供了用于在画布上绘图的方法和属性。
		var button = document.getElementById("bt");//获取按钮
		var input = document.getElementById("text");//获取输入框
		draw();
		canvas.onclick = function () {
			context.clearRect(0, 0, 120, 40);//在给定的矩形内清除指定的像素
			draw();
		}

		// 随机颜色函数
		function getColor() {
			var r = Math.floor(Math.random() * 256);
			var g = Math.floor(Math.random() * 256);
			var b = Math.floor(Math.random() * 256);
			return "rgb(" + r + "," + g + "," + b + ")";
		}

		function draw() {
			context.strokeRect(0, 0, 120, 40);//绘制矩形（无填充）
			var aCode = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"];
			// 绘制字母
			var arr = [] //定义一个数组用来接收产生的随机数
			var num //定义容器接收验证码
			for (var i = 0; i < 4; i++) {
				var x = 20 + i * 20;//每个字母之间间隔20
				var y = 20 + 10 * Math.random();//y轴方向位置为20-30随机
				var index = Math.floor(Math.random() * aCode.length);//随机索引值
				var txt = aCode[index];
				context.font = "bold 20px 微软雅黑";//设置或返回文本内容的当前字体属性
				context.fillStyle = getColor();//设置或返回用于填充绘画的颜色、渐变或模式，随机
				context.translate(x, y);//重新映射画布上的 (0,0) 位置，字母不可以旋转移动，所以移动容器
				var deg = 90 * Math.random() * Math.PI / 180;//0-90度随机旋转
				context.rotate(deg);// 	旋转当前绘图
				context.fillText(txt, 0, 0);//在画布上绘制“被填充的”文本
				context.rotate(-deg);//将画布旋转回初始状态
				context.translate(-x, -y);//将画布移动回初始状态
				arr[i] = txt //接收产生的随机数
			}
			num = arr[0] + arr[1] + arr[2] + arr[3] //将产生的验证码放入num
			// 绘制干扰线条
			for (var i = 0; i < 8; i++) {
				context.beginPath();//起始一条路径，或重置当前路径
				context.moveTo(Math.random() * 120, Math.random() * 40);//把路径移动到画布中的随机点，不创建线条
				context.lineTo(Math.random() * 120, Math.random() * 40);//添加一个新点，然后在画布中创建从该点到最后指定点的线条
				context.strokeStyle = getColor();//随机线条颜色
				context.stroke();// 	绘制已定义的路径
			}
			// 绘制干扰点，和上述步骤一样，此处用长度为1的线代替点
			for (var i = 0; i < 20; i++) {
				context.beginPath();
				var x = Math.random() * 120;
				var y = Math.random() * 40;
				context.moveTo(x, y);
				context.lineTo(x + 1, y + 1);
				context.strokeStyle = getColor();
				context.stroke();
			}

			//点击按钮验证
			button.onclick = function() {
				var text = input.value //获取输入框的值
				//判断是否为空
				if (!checkInputFunction($('#bt'))) {
					return false;
				}
				if (text === num) {
					//获取账号密码
					var phone = $('#phone').val();
					var password = $('#pwd').val();
					//下面书写验证成功后执行的内容
					$.ajax({
						url: '/emp/login',
						type: 'post',
						data: {
							phone: phone,
							password: password
						},
						dataType: 'json',
						success: function (data) {
							if (data == 3) {
								//去主页
								document.location.href = "/workdiary/homework";
							} else if (data == 2){
								layer.msg('您的账号已被禁用', { icon: 5, time: 2000 });
							}else if (data == 1){
								layer.msg('账号或密码错误', { icon: 5, time: 2000 });
							}
						}
					})
				} else {
					layer.msg('验证码错误', { icon: 5, time: 1000 });
					$("#text").val("");
				}
			}




		}
	})


	document.onkeydown = function(e){
		if(e.keyCode == 13){
			$("#bt").click();
		}
	}
</script>
</html>

